Interactions

Blur FocusBlur Focusdev ready

Preview

Code

<a href="javascript:void(0);" class="slds-has-blur-focus">Link with blur focus</a>

Blur focus is an accessibility class that will add a blurred border to an element when it is focused.

Faux LinksFaux Linksdev ready

Preview

Code

<span class="slds-type-focus">Span with faux link interactions</span>

Faux links are used on areas that can't be wrapped in an a element, but need to appear to be a link with an underline on hover. An example is in the page header for Object home. The H1 and button that sit next to each other have the .slds-type-focus class on their parent element.

Link ResetLink Resetdev ready

Preview

Code

<a class="slds-text-link--reset">Link</a>
  <hr/>
  <button class="slds-button slds-text-link--reset">Button</button>

The .slds-text-link--reset class makes links appear as regular text. Can be applied to <a> or .slds-button.

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.blur-focus
Applied to:

Outcome:

Required:

No, optional element or modifier

Comments:

--

.slds-type-focus
Applied to:

container

Outcome:

Creates a faux link with interactions

Required:

No, optional element or modifier

Comments:

This is used when an actual anchor element can not be used. For example — when a heading and button are next to each other and both need the text underline

.slds-text-link--reset
Applied to:

<a> or .slds-button

Outcome:

Makes links and buttons appear as regular text

Required:

No, optional element or modifier

Comments:

--